<template>
  <div class="search-history">
    <!-- <van-cell
      v-for="(item, index) in searchHistoryList"
      :key="item"
      :title="item"
    /> -->
    <van-cell>
      <template>
        <span>
          搜索历史
        </span>
      </template>
    </van-cell>
    <!-- 后面要写一个删除按钮， 因为要绑定删除逻辑, 推荐使用插槽 -->
    <van-cell
      border
      v-for="(item, index) in searchHistoryList"
      :key="item"
      :title="item"
    >
      <!-- 让搜索历史小叉号 和 上面全部删除同步 -->
      <van-icon name="clear" @click="handlerResultItem(item, index)"></van-icon>
    </van-cell>
    <!-- <van-cell center>删除全部记录</van-cell> -->
    <van-cell v-if="searchHistoryList.length!==0" 
    class="deletes-x" 
    value="删除全部记录"
    @click="$emit('ALL_DELETE_EVENT')" />
  </div>
</template>

<script>
export default {
  // 由父组件传过来的搜索历史列表数组
  props: {
    searchHistoryList: {
      type: Array,
      required: true
    }
  },
  data() {
    return {};
  },
  created() {
    console.log(this.searchHistoryList);
  },
  methods: {
      // 点击删除对应一项小图标
      handlerResultItem(item, index) {
          console.log(item,index);
          // 把要删除的那一项索引 传到父组件
          this.$emit('ITEM_DELETE_EVENT', index)
      }
  }
};
</script>

<style lang="less" scoped>
.deletes-x .van-cell__value--alone {
    color: #323233;
    text-align: center;
}
// .deletes-x {
//     div {
//         span {
//             text-align: center;
//         }
//     }
// }
</style>
